<template>
  <div class="zhibo">
    <header>
      <van-icon name="arrow-left" @click="fanhui" />
      <span> 直播 </span>
      <span></span>
    </header>
    <main>
      <div class="zhibi">
        <div class="black">
          <video
            src="http://www.w3school.com.cn/i/movie.ogg"
            controls="controls"
          ></video>
          <p>心悦商城！直播屋内精装格局</p>
        </div>
        <div class="black">
          <van-notice-bar
            left-icon="tv-o"
            background="#fff"
            color="#ccc"
            text="2019-09-23：14:24开启直播，欢迎收看，万千豪礼等你来拿。"
          />
          <video
            src="http://www.w3school.com.cn/i/movie.ogg"
            controls="controls"
          ></video>
          <p>心悦商城！直播屋内精装格局</p>
          <div class="butty">
            <van-icon name="setting" />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  methods:{
    fanhui(){
      this.$router.push("/home")
    }
  }
};
</script>

<style scoped lang="scss">
.zhibo {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  align-items: center;
  background: cornflowerblue;
  color: #fff;
  font-size: 16px;
}
main {
  flex: 1;
  overflow: scroll;
  .zhibi {
    width: 100%;
    display: flex;
    flex-direction: column;
    .black{
      width: 100%;
      display: flex;
      flex-direction: column;
      position:relative;
      padding:20px;
      p{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: bolder;
      }
    }
  }
}
.butty{
  width:70px;
  height:70px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  border-radius: 50%;
  background:#40FFFF;
  text-align: center;
 
  i{
    font-size: 50px;
    color: cornflowerblue;
     line-height: 70px;
  }
}
</style>